<template>
  <div class="page-wrapper">
    <el-card class="card">
      <!-- 公司信息行 -->
      <treeTools :data="companyInfo" :is-company="true" @ShowDialog="ShowDialog" />
      <hr>
      <el-tree :data="treeData" :props="config" default-expand-all>
        <!-- slot='插槽名' 相当于 #插槽名  ；slot-scoped='{data}'相当于 #插槽名='{data}'  -->
        <template v-slot="scope">
          <!-- 部门名称:{{ scope.data.name }} 负责人{{ scope.data.manager }} -->
          <!-- 公司信息行 -->
          <treeTools :data="scope.data" @ShowDialog="ShowDialog" @ShowEditDialog="ShowEditDialog" @reload="loadList" />
        </template>
      </el-tree>
    </el-card>
    <!-- 父页面使用组件利用点击控制弹出 -->
    <DeptDialog ref="deptDialog" :is-show-dialog="isShowDialog" :data="data" @reload="loadList" @close="isShowDialog=false" />
  </div>
</template>

<script>
import treeTools from '@/views/departments/components/tree-tools.vue'
import { getDepts, editDepartments } from '@/api/departments'
import { listToTree } from '@/utils/index'
import DeptDialog from './components/dept-dialog.vue'

export default {
  components: {
    treeTools,
    DeptDialog

  },
  data() {
    return {
      // 树形数据演示
      // 一个数组, 其中每个元素都是一个节点, label代表节点名, children代表子节点
      companyInfo: {
        name: '传智教育黑马程序员',
        manager: '负责人',
        id: ''
      },
      // 去掉模拟数据, 只剩下空数组, 后续要从 api 获取帧数据
      treeData: [],
      data: {},
      isShowDialog: false,
      config: {
        label: 'name'
      }
    }
  },
  created() {
    this.loadList()
  },
  // 1. 顶层只能有 pid 为空字符串的顶级部门 (原来数据扁平, 现在第一层不能再有子部门)
  // 2. 每个顶级部门都要查找 pid === 当前部门 id的自己的子部门放入 children
  // 3. 所有的层级都应该这样找, 有一个目标pid找到以后放入数组中即可
  methods: {
    async loadList() {
      const { depts } = await getDepts()
      console.log(depts)
      // 这里的数据不符合要求需要转换
      // 我们封装一个函数, 希望输入不合法数据, 输出可以使用的结果
      this.treeData = listToTree(depts, '')
    },
    ShowDialog(data) {
      this.data = data
      console.log('对应部门', data)
      this.isShowDialog = true
    },
    async ShowEditDialog(data) {
      // 编辑也需要带上点击的数据
      // console.log('被点击编辑的弹窗数据', data)
      // 这里虽然有被点击的部门, 不建议直接用, 不确定是否完整
      // 还是通过接口获取详情才保险
      const res = await editDepartments(data.id)
      // 这里是中间桥梁, 树形点击, 将数据传过来, 这里发起请求
      // 获取到详情, 最终要交给弹窗组件formData进行回显
      // 由于子组件的formData 是用户需要填写的, 不能用 props 传值
      // 其实 vue 有一个功能, 通过 this.$refs 可以得到子组件的实例 this
      // 直接调用里面的函数或者直接修改里面的数据都是可以的
      console.log(res)
      this.$refs.deptDialog.formData = res
      this.isShowDialog = true
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  padding: 30px 140px;
}
// 小手控制
.dropdown-btn {
  cursor: pointer;
}
.info{
  width: 100%;
}
</style>
